<template>
  <el-card>
    <div class="page">
      <h3 class="applyRecode">发布商品</h3>
      <el-form class="form" :model="form" ref="form" :rules="rules" label-width="140px">
        <el-form-item size="small" class="pubselect" label="商品类型：" prop="goodsType">
          <el-select class="publis" v-model="form.goodsType" placeholder="请选择">
            <el-option v-for="(item, index) in items" :key="index" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item size="small" class="pubselect" label="请选择商品分类：" prop="goodskind">
          <!-- <el-select class="publis" v-model="form.goodskind" placeholder="请选择">
            <el-option v-for="kind in kinds" :key="kind.classId" :label="kind.className" :value="kind.classId"></el-option>
          </el-select> -->
          <el-cascader
            :options="kinds"
            v-model="form.goodskind" :props="props">
          </el-cascader>
        </el-form-item>
        <div class="next">
          <el-button type="primary" size="small" @click="next('rules')">下一步</el-button>
        </div>
      </el-form>
    </div>
  </el-card>
</template>
<script>
export default {
  name: 'release',
  data () {
    return {
      form: {
        goodsType: '',
        goodskind: []
      },
      className: [],
      items: [
        {
          label: '实物商品',
          value: '1'
        },
        {
          label: '虚拟商品',
          value: '2'
        }
      ],
      kinds: [],
      props: {
        label: 'className',
        value: 'classId',
        children: 'goodsClassList'
      },
      rules: {
        goodsType: [
          { required: true, message: '请选择商品类型', trigger: 'change' }
        ],
        goodskind: [
          { required: true, message: '请选择商品分类', trigger: 'change' }
        ]
      }
    }
  },
  created () {
    this.goods()
  },
  methods: {
    goods () {
      this.$tkAjax.get(`${this.$config.baseUrl}/goods/goodsClass/getAllGoodsClassByMerchantId?merchantId=` + this.$store.state.merchantId).then(res => {
        res.data.content = JSON.parse(JSON.stringify(res.data.content).replace(/\[\]/img, 'null'))
        if (Array.isArray(res.data.content)) {
          this.kinds = res.data.content
        }
      }).catch(err => {
        console.log(err)
      })
    },
    getClassName (arr = [], i) {
      let obj = arr.find(item => {
        return item.classId === this.form.goodskind[i]
      })
      if (i < this.form.goodskind.length - 1) {
        i++
        this.getClassName(obj.goodsClassList, i)
      }
      this.className.unshift(obj.className)
    },
    next () {
      this.$refs.form.validate((valid) => {
        if (valid) {
          if (this.$store.state.settled === '9') {
            this.$message.warning('商家已被停售,请及时联系运营人员')
            return false
          }
          this.getClassName(this.kinds, 0)
          this.className = this.className.join(',')
          this.$store.commit('setClasses', {
            classid: this.form.goodskind,
            goodsType: this.form.goodsType,
            className: this.className,
            goodsTypeName: this.form.goodsType
          })
          this.$router.push({
            path: '/matter'
          })
          // this.$router.push('/invented')
        } else {
          console.log('error submit!!')
          return false
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.page {
  .form {
    width: 80%;
    margin: 70px auto 14px;
    .pubselect {
      .el-form-item__content {
        .el-cascader {
          width: 60%;
        }
      }
      .el-form-item__content .publis {
        width: 60%;
      }
    }
    .next {
      width: 70%;
      margin: 42px 0;
      text-align: center;
      .el-button {
        border-radius: 4px;
      }
    }
  }
}
</style>
